<template>
  <!-- 用工管理--新增 -->
  <el-dialog :title="mode=='add'?'新增':'编辑'"
             class="addRecruitment"
             width='662px'
             :close-on-click-modal="false"
             :visible.sync="visible">
    <!-- 具体表单 -->
    <el-form :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             @keyup.enter.native="dataFormSubmit()"
             label-width="120px">
      <!-- <el-form-item label="企业名称"
                    prop="companyName">
        <el-input v-model="dataForm.companyName"
                  placeholder="企业名称"></el-input>
      </el-form-item> -->
      <el-form-item label="任务名称"
                    prop="taskName">
        <el-input v-model="dataForm.taskName"
                  placeholder="任务名称"></el-input>
      </el-form-item>
      <el-form-item label="任务编号"
                    prop="taskNo">
        <el-input v-model="dataForm.taskNo"
                  placeholder="任务编号"></el-input>
      </el-form-item>
      <el-form-item label="所属单位"
                    prop="companyName">
        <el-input v-model="dataForm.companyName"
                  placeholder="所属单位"></el-input>
      </el-form-item>
      <el-form-item label="姓名"
                    prop="workerName">
        <el-input v-model="dataForm.workerName"
                  placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号码"
                    prop="mobile">
        <el-input v-model="dataForm.mobile"
                  placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码"
                    prop="cardCode">
        <el-input v-model="dataForm.cardCode"
                  placeholder="身份证号码"></el-input>
      </el-form-item>
      <el-form-item label="银行账户"
                    prop="bankCartId">
        <el-input v-model="dataForm.bankCartId"
                  placeholder="银行账户"></el-input>
      </el-form-item>
      <el-form-item label="开户银行"
                    prop="bankName">
        <el-input v-model="dataForm.bankName"
                  placeholder="开户银行"></el-input>
      </el-form-item>
      <!-- <el-form-item label="企业ID"
                    v-if="workerIdVisb"
                    prop="workerId">
        <el-input v-model="dataForm.workerId"
                  placeholder="企业ID"></el-input>
      </el-form-item> -->
      <!-- <el-form-item label="用工开始时间"
                    prop="startTime">
        <el-date-picker v-model="dataForm.startTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="用工开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="用工结束时间"
                    prop="endTime">
        <el-date-picker v-model="dataForm.endTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="用工结束时间">
        </el-date-picker>
      </el-form-item> -->
      <!-- 用工时间 -->
      <el-form-item label="用工时间"
                    prop="ReTime">
        <el-date-picker v-model="ReTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        value-format="yyyy-MM-dd"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="职位"
                    prop="job">
        <el-input v-model="dataForm.job"
                  placeholder="职位"></el-input>
      </el-form-item>
      <el-form-item label="税前收入"
                    prop="amount">
        <el-input v-model="dataForm.amount"
                  placeholder="税前收入"></el-input>
      </el-form-item>
      <el-form-item label="税收比例"
                    prop="taxRate">
        <el-input v-model="dataForm.taxRate"
                  placeholder="税收比例"></el-input>
      </el-form-item>
      <el-form-item label="税收金额"
                    prop="taxManagerment">
        <!-- :disabled="true" -->
        <el-input v-model="dataForm.taxManagerment"
                  placeholder="税收金额"></el-input>
      </el-form-item>
      <!-- 税 -->
      <el-form-item label="税种"
                    prop="taxCategories">
        <el-input v-model="dataForm.taxCategories"
                  placeholder="税种"></el-input>
      </el-form-item>
      <!-- <el-form-item label="是否实名认证"
                    prop="isAuth">
        <el-radio v-model="dataForm.certificationState"
                  label="0">未实名</el-radio>
        <el-radio v-model="dataForm.certificationState"
                  label="1">实名</el-radio>
      </el-form-item> -->
      <el-form-item label="确认状态"
                    v-if="userRoleId==1"
                    prop="isAuth">
        <el-select v-model="dataForm.status"
                   clearable
                   placeholder="选择状态">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer"
          class="dialog-footer">
      <el-button type="primary"
                 class="btn"
                 @click="addSave"
                 v-if="mode == 'add'">确认新增</el-button>
      <el-button type="primary"
                 class="btn"
                 @click="update"
                 v-else>确认修改</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      mode: 'add',
      workerIdVisb: true,
      // 隐藏
      visible: false,
      userRoleId: '',
      dataForm: {
      },
      // 用工时间
      ReTime: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      dataRule: {
        workerName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        workerId: [
          { required: true, message: '企业ID不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              // 手机号码正则校验
              let _reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              if (_reg.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的手机号码'))
              }
            }
          }
        ],
        taskNo: [
          { required: true, message: '任务编号不能为空', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              // 正则校验
              let _reg = /^\d+$/
              if (_reg.test(value)) {
                callback()
              } else {
                callback(new Error('任务编号只能为数字'))
              }
            }
          }
        ]
      },
      // 用户确认状态
      options: [
        {
          value: 0,
          label: '企业未确认'
        },
        {
          value: 1,
          label: '用户未确认'
        },
        {
          value: 2,
          label: '用户已确认'
        }
      ],
      tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
    }
  },
  watch: {
    ReTime () {
      // console.log(this.ReTime)
      try {
        this.dataForm.startTime = this.ReTime[0]
        this.dataForm.endTime = this.ReTime[1]
      } catch (error) {
        this.dataForm.startTime = ''
        this.dataForm.endTime = ''
      }
    },
    'dataForm.mobile' () {
      // /sys/user/getInfo
      if (this.mode === 'add') {
        if (this.dataForm.mobile.length === 11) {
          this.$confirm('是否自动填充信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // this.$message({
            //   type: 'success',
            //   message: '自动填充'
            // })
            // console.log('电话号到11位了')
            this.$http({
              url: this.$http.adornUrl('/sys/user/getInfo?mobile=' + this.dataForm.mobile),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({ data }) => {
              // console.log(data)
              if (data.code === 0) {
                try {
                  this.dataForm.workerName = data.user.userName
                  this.dataForm.cardCode = data.user.idNumber
                  this.dataForm.bankCartId = data.user.bakInfo.bankCardNumber
                  this.dataForm.bankName = data.user.bakInfo.bankName
                } catch (error) {
                }
              } else {
                this.$message({
                  type: 'warning',
                  message: data.msg
                })
              }
            })
          }).catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '取消自动填充'
            // })
          })
        }
      }
    }
  },
  // computed: {
  //   dataForm: {
  //     amount2: function () {
  //       return this.dataForm.amount * this.dataForm.taxRate
  //     }
  //   }
  // },
  created () {
    if (sessionStorage.getItem('userRoleId') === '2') {
      this.workerIdVisb = false
    }
    this.userRoleId = sessionStorage.getItem('userRoleId')
  },
  methods: {
    // 父调用的方法
    addInit () {
      this.visible = true
      this.ReTime = []
    },
    // 父调用的方法，编辑
    init (id) {
      this.ReTime = []
      this.dataForm.id = id || 0
      this.visible = true
      this.$http({
        url: this.$http.adornUrl('/sys/worker/info/' + this.dataForm.id),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.dataForm = data.worker
        try {
          if (data.worker.startTime) {
            this.ReTime.push(data.worker.startTime)
          }
          if (data.worker.endTime) {
            this.ReTime.push(data.worker.endTime)
          }
        } catch (error) {
          this.ReTime = []
        }
        // console.log(this.ReTime)
        // this.dataForm.certificationState = this.dataForm.certificationState + ''
      })
      // /sys/worker/save
    },
    // 修改
    update () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/worker/update'),
            method: 'post',
            data: this.$http.adornParams(this.dataForm)
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  // 成功之后的回调
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 新增
    // /sys/bill/save
    addSave () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/worker/save'),
            method: 'post',
            data: this.$http.adornParams(this.dataForm)
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  // 成功之后的回调
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
    // 结束
  }
}
</script>

<style lang="scss">
.addRecruitment {
  .el-input.el-input--medium {
    width: 370px;
  }
  .el-dialog__header {
    background-color: #f8f8f8;
  }
  .el-dialog__body {
    display: flex;
    justify-content: center;
  }
  .btn {
    width: 370px;
  }
  .el-range-editor--medium.el-input__inner {
    width: 370px;
  }
  .dialog-footer {
    text-align: center !important;
    padding-bottom: 39px;
  }
  .el-dialog__footer {
    text-align: center;
    padding-bottom: 39px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
